
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">选择标识</div>
      <div class="w-3/4">
        <a-input
          type="text"
          placeholder="用于$('')查询"
          v-model:value.trim="current.selector"
        />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">弹框标题</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.componentProps.title" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">传入参数</div>
      <div class="w-3/4">
        <!-- <CirclePlus
          @click="addParam"
          style="width: 1em; height: 1em; margin-right: 8px"
        /> -->
        <a-button type="primary" @click="addParam">添加参数</a-button>
      </div>
    </div>

    <div class="">
      <a-table :data="current.componentProps.params" style="width: 100%">
        <a-table-column prop="key" label="参数" align="center" />
        <a-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <a-button type="primary" size="small" @click="editor(scope.index)"
              >编辑</a-button
            >
            <a-button type="danger" size="small" @click="remove(scope.index)"
              >删除</a-button
            >
          </template>
        </a-table-column>
      </a-table>
    </div>

    <div class="flex items-center p-10">
      <div class="w-1/4 text-14 font-bold">事件配置</div>
    </div>
    <div class="flex items-center px-10">
      <div class="w-130 text-14">onShow</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          mode="multiple"
          allowClear
          v-model="current.componentProps.onShowEvents"
          class="m-2"
          placeholder="Select"
        >
          <a-select-option
            v-for="item in lowCode.eventCollection"
            :key="item.code"
            :value="item.code"
          >{{ item.describe }}</a-select-option>
        </a-select>
      </div>
    </div>
    <div class="flex items-center px-10">
      <div class="w-130 text-14">onHide</div>
      <div class="w-3/4">
        <a-select
          style="width: 100%"
          mode="multiple"
          allowClear
          v-model:value="current.componentProps.onHideEvents"
          class="m-2"
          placeholder="Select"
        >
          <a-select-option
            v-for="item in lowCode.eventCollection"
            :key="item.code"
            :value="item.code"
          >{{ item.describe }}</a-select-option>
        </a-select>
      </div>
    </div>

    <a-modal v-model:visible="paramsVisible" title="参数" width="30%">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <a-button @click="paramsVisible = false">删除</a-button>
          <a-button type="primary" @click="paramsVisible = false"
            >确定</a-button
          >
        </span>
      </template>
    </a-modal>
  </div>
</template>
 
<script lang="ts">
import { Component } from "@/components/low-code/core";
import { defineComponent, reactive, ref } from "vue";


export default defineComponent({
  name: "dialogSetting",
  props: ["current"],
  setup(props) {
    const component = reactive<Component>(props.current);
    let lowCode = component.getLowCodeInstance();

    const paramsVisible = ref(false);

    const addParam = () => {
      component.componentProps.params.push({
        key: "id",
        origin: "",
        value: "",
      });
    };

    const editor = (index: any) => {
      let item = component.componentProps.params[index];

      paramsVisible.value = true;
    };

    const remove = (index: any) => {
      component.componentProps.params.splice(index, 1);
    };
    return { lowCode, addParam,editor, remove, paramsVisible };
  },
});
</script>

<style  scoped>
</style>
